import { StyleSheet, Image, View, TouchableOpacity, Text, LayoutAnimation } from 'react-native'
import React, { useState } from 'react'
import AgreementLink from './components/AgreementLink'
import icon_main_logo from '@/assets/images/icon_main_logo.png'
import icon_wx_small from '@/assets/images/icon_wx_small.png'
import icon_arrow from '@/assets/images/icon_arrow.png'

interface Props {
  /** 切换登录类型 */
  onChangeLoginType: (type: 'fast' | 'input') => void
  children?: React.ReactNode
}
const FastLogin: React.FC<Props> = ({ onChangeLoginType }) => {
  // 点击其他登录的回调
  const onChangeLogin = () => {
    // 通知父组件改变登录类型
    onChangeLoginType('input')
    LayoutAnimation.easeInEaseOut()
  }
  // 勾选用户协议
  const [selected, setSelected] = useState(false)
  // 勾选用户协议的回调
  const onSelected = (status: boolean) => {
    setSelected(status)
  }
  return (
    <View style={styles.root}>
      {/* logo */}
      <View style={styles.logoContainer}>
        <Image source={icon_main_logo} style={styles.logo}></Image>
      </View>
      {/* 登录 */}
      <View style={styles.loginContainer}>
        <TouchableOpacity style={[styles.oneKeyBtn, styles.loginBtn]} activeOpacity={0.7}>
          <Text style={styles.oneKeyTxt}>一键登录</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.wxBtn, styles.loginBtn]} activeOpacity={0.7}>
          <Image source={icon_wx_small} style={styles.wxIcon}></Image>
          <Text style={styles.wxTxt}>微信登录</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.otherBtn} activeOpacity={0.7} onPress={onChangeLogin}>
          <Text style={styles.otherTxt}>其他登录方式</Text>
          <Image source={icon_arrow} style={styles.arrowIcon}></Image>
        </TouchableOpacity>
        {/* 用户协议 */}
        <AgreementLink onSelected={onSelected}></AgreementLink>
      </View>
    </View>
  )
}

export default FastLogin

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff'
  },
  logoContainer: {
    width: '100%',
    flex: 4,
    alignItems: 'center'
  },
  logo: {
    width: 180,
    height: 150,
    marginTop: 150,
    resizeMode: 'contain'
  },
  loginContainer: {
    width: '100%',
    flex: 3,
    alignItems: 'center'
  },
  loginBtn: {
    width: 300,
    height: 60,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 20
  },
  oneKeyBtn: {
    backgroundColor: '#f92845'
  },
  wxBtn: {
    backgroundColor: '#25c062',
    flexDirection: 'row'
  },
  oneKeyTxt: {
    color: '#fff',
    fontSize: 18
  },
  wxTxt: {
    color: '#fff',
    fontSize: 20
  },
  wxIcon: {
    width: 40,
    height: 40
  },
  otherBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 75
  },
  otherTxt: {
    color: '#2d4063',
    fontSize: 14,
    fontWeight: 'bold'
  },
  arrowIcon: {
    transform: [{ rotate: '180deg' }],
    width: 16,
    height: 16,
    marginLeft: 5
  }
})
